<template>
	<view class="team hui">
		<view class="head">
			<u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" bgColor="transparent">
				<view class="u-nav-slot b_flex_c" slot="center">
					<view class="city">客户管理</view>
				</view>
			</u-navbar>
		</view>
		<view class="time_box b_flex_c">
			<view @click="startShow=true">
				<u--input :customStyle="customStyle" fontSize="13px" :clearable="true" placeholder="开始时间" v-model="params.start" :readonly="true"></u--input>
			</view>
			-
			<view @click="endShow=true">
				<u--input :customStyle="customStyle" fontSize="13px" :clearable="true" placeholder="结束时间" v-model="params.end" :readonly="true"></u--input>
			</view>
			
			<view class="s_box b_flex_cc" @click="ywyShow=true">
				<view class="s_right">{{ywytext}}</view>
				<u-icon name="arrow-down-fill" color="#000000" size="11"></u-icon>
			</view>
			
			<view class="btn" @click="search">搜索</view>
             <view class="btn orange" @click="clear">重置</view>
		</view>
		
		<view style="height: 58px;"></view>
		
		<view class="team_box">
			<block v-if="list.length">
				<view class="team_list" v-for="item in list" :key="item.id">
					<view class="team_img">
						<view class="info_name flex-full">
							<image :src="item.avatar"></image>
							<view class="user_content">
								<view class="team_name" v-if="item.nickname"> {{item.nickname}}</view>
								<view class="team_name" v-if="item.mobile"> {{item.mobile}}</view>
								<view class="team_time">{{item.createtime}}</view>
							</view>
							<view class="btn_box" @click="edit(item)">详情</view>
						</view>
					</view>
				</view>
			</block>
			<view v-if="show" class="bitmap">
				<image src="/static/img/no_content.png" mode="widthFix"></image>
				<view>暂时没有客户哦~</view>
			</view>
		</view>
		<u-picker @confirm="setYwy" :show="ywyShow" :columns="ywy" keyName="nickname" @close="ywyShow=false"
			@cancel="ywyShow=false" :closeOnClickOverlay="true"></u-picker>
		<u-datetime-picker v-if="time" :show="startShow" mode="date" v-model="start" @cancel="startShow=false"
			@confirm="setStartTime" :minDate="time.minDateUsers" :maxDate="time.maxDates"></u-datetime-picker>

		<u-datetime-picker v-if="time" :show="endShow" mode="date" v-model="end" @cancel="endShow=false"
			@confirm="setEndTime" :minDate="time.minDateUsers" :maxDate="time.maxDates"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		glTeam,
		ywyList,
		TimeShow
	} from "@/require/api.js";
	export default {
		data() {
			return {
				customStyle:{paddingLeft:'3px',paddingRight:'3px',width:'75px'},
				list: [],
				total: 0,
				params: {
					page: 1,
					start: '',
					end: '',
					ywy:''
				},
				show: false,
				ywy: [],
				ywytext:'全部人员',
				ywyShow: false,
				startShow: false,
				endShow: false,
				end: '',
				start: '',
				time: '',
				top:0
			}
		},
		onShow() {
			this.top = uni.getSystemInfoSync().statusBarHeight + 44;
			this.getList();
		},
		onLoad() {
			this.getYwy();
			this.getTimeShow();
		},
		methods: {
			clear(){
				this.params= {
					page: 1,
					start: '',
					end: '',
					ywy:''
				};
				this.ywytext='全部人员';
				this.getList();
			},
			search(){
				this.getList();
			},
			setYwy(e){
				
				this.params.ywy=e.value[0].id;
				this.ywytext=e.value[0].nickname;
				this.ywyShow=false;
			},
			setEndTime(e) {
				if (e.value < this.start) return this.$project.toast('结束时间不能小于开始时间');
				this.params.end = this.$project.changeTime(e.value, 1, 2);
				this.endShow = false;
			},
			setStartTime(e) {
			
				if (this.end&&e.value > this.end) return this.$project.toast('开始时间不能大于结束时间');
			
				this.params.start = this.$project.changeTime(e.value, 1, 2);
				this.startShow = false;
			},
			async getTimeShow() {
				let {
					code,
					data
				} = await TimeShow();
				if (code == 1) {
					this.time = data;
				}
			},
			async getYwy() {
				let {
					data,
					code
				} = await ywyList();
				if (code == 1) {
					this.ywy[0] = data;
				}
			},
			edit(e) {
				uni.navigateTo({
					url: '/pages/kh/info?id=' + e.id
				})
			},
			setShow() {
				if (this.total < 1) {
					this.show = true;
				} else {
					this.show = false;
				}
			},
			async getList() {
				this.params.page = 1;
				let {
					code,
					data
				} = await glTeam(this.params);

				if (code != 1) return;

				if (!data.data || data.data.length < 1) {
					this.show = true;
				} else {
					this.show = false;
				}
				this.list = data.data;
				this.total = data.total;
			}
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.params.page++;
				glTeam(this.params).then(res => {
					res.data.data.forEach((res) => {
						this.list.push(res);
					});
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep {
		.u-navbar--fixed {
			background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
		}
		.u-input {
			border: 1rpx solid #eee;
		}
	}

	.head {
		background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
	}

	.team_box {
		padding: 0rpx 25rpx;
	}

	.team_list {
		display: flex;
		align-items: center;
		justify-content: space-between;

		border-bottom: 2rpx solid #eee;
	}

	.team_img {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.info_name {
		background-color: white;
		margin-top: 30rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		width: 100%;
	}

	.user_content {
		width: 60%;
	}

	.team_time {
		font-size: 26rpx;
		color: #343434;
	}

	.team_img image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.info_time {
		padding-left: 30rpx;
	}

	.team_name {
		font-size: 32rpx;
		color: #333333;
		padding: 10rpx 0;
	}

	.captain {
		width: 68rpx;
		height: 28rpx;
		border: 1px solid #FF4040;
		border-radius: 14rpx;
		font-size: 22rpx;
		color: #FF4040;
		text-align: center;
		line-height: 28rpx;
	}

	.dissolution {
		width: 146rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: #FF4040;
		border-radius: 20rpx;
		color: #fff;
		font-size: 22rpx;
	}

	.remove {
		width: 146rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: #FFE048;
		border-radius: 20rpx;
		color: #333;
		font-size: 22rpx;
	}

	.bitmap {
		text-align: center;
		padding-top: 100rpx;
	}

	.bitmap image {
		width: 60%;
	}

	.bitmap view {
		color: gray;
		font-size: 26rpx;
		margin-top: 30rpx;
	}

	.btn_box {
		background-color: #F0892D;
		color: white;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		margin-left: auto;
	}

	.time_box {
		background-color: white;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		position: fixed;
		left: 0;
	}

	.btn {
		background-color: #18BC9C;
		width: 150rpx;
		text-align: center;
		color: white;
		box-sizing: border-box;
		padding: 15rpx 0;
		border-radius: 15rpx;
		font-size: 26rpx;
		margin-left:5rpx;
	}
	
	.orange{
		background: #FF4040;
	}
	
	.s_box{
		width: 46%;
		background-color: white;
		box-sizing: border-box;
		padding: 16rpx 0;
		border-radius: 45rpx;
	}
	
	.s_right{
		margin-right:5rpx;
		font-size: 26rpx;
	}
	
</style>